<template>
	<div class="app-container">
		<!-- 顶部搜索区域 -->
		<el-form ref="searchForm" :model="searchCLassRoomQueryInfo" :rules="searchFormRules" :inline="true" class="demo-form-inline">
			<el-form-item prop="classroom_name">
				<el-input v-model="searchCLassRoomQueryInfo.classroom_name" placeholder="教室名称" value=""/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryScreenSemesterData">查询</el-button>
				<el-button @click="restLess">查看全部教室</el-button>
			</el-form-item>
		</el-form>
		<div class="xinjianjiaoshiBtn">
			<el-button type="success" @click="xinjianjiaoshiDialog = true">新建教室</el-button>
		</div>
		<!-- 主体区域 -->
    <div class="tableAndPageDIV">
			<div class="classRoomTableDIv">
				<!-- 教室表格 -->
				<el-table border fit highlight-current-row :data="classShowTable">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column type="index" label="序号" width="55" align="center" prop="index">
							<template slot-scope="scope">
							  <span>{{(searchCLassRoomQueryInfo.page - 1) * searchCLassRoomQueryInfo.limit + scope.$index + 1 }}</span>
							 </template>
					</el-table-column>
					<el-table-column align="center" label="教室名称" prop="classroom_name" />
					<el-table-column align="center" label="教室编号" prop="classroom_num" />
					<el-table-column align="center" label="创建者名字" prop="createor_name" />
					<el-table-column align="center" label="创建时间" prop="create_time" />
					<el-table-column align="center" label="横排座位数量" width="120" prop="crosswise" />
					<el-table-column align="center" label="竖排座位数量" width="120" prop="lengthways" />
					<el-table-column align="center" label="容纳人数" prop="people" />
					<el-table-column align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-button type="primary" size="small" icon="el-icon-search" @click="see(scope.row)">查看</el-button>
              <el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
            </template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 页码切换 -->
			<div class="bottomPaginationaa">
				<el-pagination :current-page.sync="searchCLassRoomQueryInfo.page" :page-sizes="[6, 10, 15]" :page-size="searchCLassRoomQueryInfo.limit"
				 layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
		<!-- 新建教室DIALOG -->
		<el-dialog :before-close="handleClose" title="新建教室" :visible.sync="xinjianjiaoshiDialog" width="55%">
			<el-form ref="classRoomFormRef" :model="classRoomForm" :rules="classRoomFormRules" label-width="120px" inline>
				<div class="claromdiv">
					<div class="div1row">
						<div>
							<el-form-item label="教室名称" prop="classroom_name">
								<el-input v-model="classRoomForm.classroom_name" />
							</el-form-item>
						</div>
						<div>
							<el-form-item label="教室编号" prop="classroom_num">
								<el-input v-model="classRoomForm.classroom_num" />
							</el-form-item>
						</div>
						<div class="">
							<el-form-item label="容纳人数" prop="people">
								<el-select v-model="classRoomForm.people" placeholder="请选择容纳人数">
									<el-option v-for="item in 60" :key="item" :label="item" :value="item" />
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="div2row">
						<div>
							<el-form-item label="竖排座位" prop="lengthways">
								<el-select v-model="classRoomForm.lengthways" placeholder="竖排座位数量" style="width: 185px">
									<el-option v-for="item in 10" :key="item" :label="item" class-room :value="item" />
								</el-select>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="横排座位" prop="crosswise">
								<el-input v-model="cputdlengthways" disabled />
							</el-form-item>
						</div>
						<div>
							<el-form-item style="margin-left: 52px">
								<el-button type="success" size="medium" @click="seesit()">生成布局</el-button>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
			<div class="tuologoshowDIV">
				<span class="iconfont icon-yixuanzuowei" />
				<div>启用座位</div>
				<span class="iconfont icon-zuowei1" />
				<div>未启用</div>
			</div>
			<div v-if="isShowzuowei">
				<div class="AAzuoweitubiaoDIV">
					<div class="tubiao8">
						<span v-for="item in 40" :key="item" class="iconfont icon-yixuanzuowei" />
					</div>
				</div>
			</div>
			<div v-if="!isShowzuowei">
				<div class="AAzuoweitubiaoDIV">
					<div :class="classObject">
						<span v-for="(item, i) in parseInt(classRoomForm.people)" :key="i" :class="[
                isSitSuzu[i] == 1
                  ? 'iconfont icon-yixuanzuowei'
                  : 'iconfont icon-zuowei1',
              ]"
						 @click="changeTubiao(i)" />
					</div>
				</div>
			</div>
			<div class="bottomDiv">
				<!-- <div>若有座位不可用，请联系工作人员更换。</div> -->
				<div>若有座位不可用，请点击图标取消使用状态</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose('classRoomForm')">取 消</el-button>
				<el-button type="primary" @click="pushObjectToForm()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog :before-close="handleClose" title="编辑教室" :visible.sync="editjiaoshiDialog" width="55%" @close="close">
			<el-form ref="classRoomFormRef" :model="classRoomForm" :rules="classRoomFormRules" label-width="120px" inline>
				<div class="claromdiv">
					<div class="div1row">
						<div>
							<el-form-item label="教室名称" prop="classroom_name">
								<el-input v-model="classRoomForm.classroom_name" />
							</el-form-item>
						</div>
						<div>
							<el-form-item label="教室编号" prop="classroom_num">
								<el-input v-model="classRoomForm.classroom_num" />
							</el-form-item>
						</div>
						<div class="">
							<el-form-item label="容纳人数" prop="people">
								<el-select v-model="classRoomForm.people" placeholder="请选择容纳人数">
									<el-option v-for="item in 60" :key="item" :label="item" :value="item" />
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="div2row">
						<div>
							<el-form-item label="竖排座位" prop="lengthways">
								<el-select v-model="classRoomForm.lengthways" placeholder="竖排座位数量" style="width: 185px">
									<el-option v-for="item in 10" :key="item" :label="item" class-room :value="item" />
								</el-select>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="横排座位" prop="crosswise">
								<el-input v-model="cputdlengthways" disabled />
							</el-form-item>
						</div>
						<div>
							<el-form-item style="margin-left: 52px">
								<el-button type="success" size="medium" @click="seesit()">生成布局</el-button>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
			<div class="tuologoshowDIV">
				<span class="iconfont icon-yixuanzuowei" />
				<div>启用座位</div>
				<span class="iconfont icon-zuowei1" />
				<div>未启用</div>
			</div>
			<div v-if="isShowzuowei">
				<div class="AAzuoweitubiaoDIV">
					<div class="tubiao8">
						<span v-for="item in 40" :key="item" class="iconfont icon-yixuanzuowei" />
					</div>
				</div>
			</div>
			<div v-if="!isShowzuowei">
				<div class="AAzuoweitubiaoDIV">
					<div :class="classObject">
						<span v-for="(item, i) in parseInt(classRoomForm.people)" :key="i" :class="[
                isSitSuzu[i] == 1
                  ? 'iconfont icon-yixuanzuowei'
                  : 'iconfont icon-zuowei1',
              ]"
						 @click="changeTubiao(i)" />
					</div>
				</div>
			</div>
			<div class="bottomDiv">
				<!-- <div>若有座位不可用，请联系工作人员更换。</div> -->
				<div>若有座位不可用，请点击图标取消使用状态</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editjiaoshiDialog = false">取 消</el-button>
				<el-button type="primary" @click="determine">确 定</el-button>
			</span>
		</el-dialog>
    <!-- 查看 -->
    <el-dialog title="查看教室" :visible.sync="seeDig" width="600px">
      <el-form>
        <el-row>
          <el-col :span="12">
            <el-form-item label="教室名称" label-width="90px">
              <el-input v-model="seeData.classroom_name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教室编号" label-width="90px">
              <el-input v-model="seeData.classroom_num" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建者名字" label-width="90px">
              <el-input v-model="seeData.createor_name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" label-width="90px">
              <el-input v-model="seeData.create_time" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="横排座位" label-width="90px">
              <el-input v-model="seeData.crosswise" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="竖排座位" label-width="90px">
              <el-input v-model="seeData.lengthways" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容纳人数" label-width="90px">
              <el-input v-model="seeData.people" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
	// 将这两行代码复制到需要使用icon font的组件下面
	import '@/assets/iconfont/iconfont.js'
	import '@/assets/iconfont/iconfont.css'
	import {
		createClassRoom, //添加
		searchClassRoom, //列表
		getClassRoomMessage1 //获取教室当前信息
	} from '@/api/classRoom.js'
	export default {
		data() {
			return {
        current_page:0, //列表总共页数
        seeDig:false,
        seeData:{
          classroom_name:null,
          classroom_num:null,
          people:null,
          lengthways:null,
          crosswise:null,
          create_time:null,
          createor_name:null
        },
				isShowzuowei: true,
				isSitSuzu: [], //座位数据
				isYixuan: true,
				isShowtubiao: false,
				buviaoshow: true,
				//表格验证
				searchFormRules: {
					classroom_name: [{
						required: true,
						message: '请输入教室名字',
						trigger: 'blur'
					}]
				},
				// 添加表格验证
				classRoomFormRules: {
					classroom_num: [{
						required: true,
						message: '请输入教室编号',
						trigger: 'blur'
					}],
					classroom_name: [{
						required: true,
						message: '请输入教室名称',
						trigger: 'blur'
					}],
					people: [{
						required: true,
						message: '请输入容纳人数',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '请输入数字',
						transform(value) {
							return Number(value)
						}
					}],
					crosswise: [{
						required: true,
						message: '请输入横排座位数量',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '请输入数字',
						transform(value) {
							return Number(value)
						}
					}],
					lengthways: [{
						required: true,
						message: '请输入竖排座位数量',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '请输入数字',
						transform(value) {
							return Number(value)
						}
					}]
				},
				unadbledSit: [],
				classShowTable: [], //教室表格数据
				lookClassRoomDialog: false,
				searchCLassRoomQueryInfo: {
					page: 1,
					limit: 10,// 每页显示数量
					classroom_name: ''
				}, //分页参数
				editjiaoshiDialog: false, //编辑教室默认隐藏
				xinjianjiaoshiDialog: false, //新增教室默认隐藏
				currentPage: 0, // //当前页数 ，默认为1
				total: 0, // 统共页数，默认为0
        allList: [], //所有数据
        currentPageData: [], //当前页显示内容
				classRoomShowTable: [],
				classRoomTable: [],
				crosswiseInt: 36,
				isClassActive: true,
				showzuowei: true,
				// 添加教室表格数据
				classRoomForm: {
					unid: '',
					classroom_name: '',
					classroom_num: '',
					people: 40,
					crosswise: null,
					lengthways: null,
					ban: []//	禁用座位
				}
			}
		},
		computed: {
			// 座位排布
			classObject: function () {
				return {
					tubiao1: parseInt(this.classRoomForm.lengthways) === 1,
					tubiao2: parseInt(this.classRoomForm.lengthways) === 2,
					tubiao3: parseInt(this.classRoomForm.lengthways) === 3,
					tubiao4: parseInt(this.classRoomForm.lengthways) === 4,
					tubiao5: parseInt(this.classRoomForm.lengthways) === 5,
					tubiao6: parseInt(this.classRoomForm.lengthways) === 6,
					tubiao7: parseInt(this.classRoomForm.lengthways) === 7,
					tubiao8: parseInt(this.classRoomForm.lengthways) === 8,
					tubiao9: parseInt(this.classRoomForm.lengthways) === 9,
					tubiao10: parseInt(this.classRoomForm.lengthways) === 10
				}
			},
			// 横排
			cputdlengthways: function () {
				if (this.classRoomForm.lengthways === null) return 0
				// `this` 指向 vm 实例
				else {
					return Math.floor(parseInt(this.classRoomForm.people) / parseInt(this.classRoomForm.lengthways))
				}
			}
		},
		watch: {
			'classRoomForm.lengthways': {
				handler: function (val) {
					// console.log(cputdlengthwaysz)
					this.classRoomForm.crosswise = Math.floor(parseInt(this.classRoomForm.people) / parseInt(this.classRoomForm.lengthways))
					if (this.isSitSuzu.length !== 0) this.isSitSuzu = []
					var m = this.classRoomForm.people
					for (var i = 0; i < m; i++) {
						this.isSitSuzu.push(1)
					}
					console.log('this.isSitSuzu')
					console.log(this.isSitSuzu)
				},
				deep: true
			}
		},
		created() {
			this.searchClassRoomList();
		},
		methods: {
			// 座位布局生成
			seesit() {
				this.isShowzuowei = false
			},
			// 单个座位状态
			changeTubiao(i) {
				if (this.isSitSuzu[i] === 2) {
					// splice（index , num,new）方法 index-索引 num -删除的数量 new新增的元素 可以为多个
					this.isSitSuzu.splice(i, 1, this.isSitSuzu[i] - 1)
				} else {
					this.isSitSuzu.splice(i, 1, this.isSitSuzu[i] + 1)
				}
			},
			// 确定按钮
			pushObjectToForm() {
				this.classRoomForm.crosswise = this.cputdlengthways
				this.searchOutClassroom(this.isSitSuzu, this.unadbledSit)
				this.getDisabledSit(this.unadbledSit, this.classRoomForm.ban)
				this.createClassRoomList()
			},
			// 遍历找出所有不可用座位
			searchOutClassroom(nod, arr) {
				nod.forEach((item, i) => {
					if (item === 1) {
						return
					}
					arr.push(i)
				})
			},
			// 求不可用座位定位
			getDisabledSit(nod, arr) {
				let lw = this.classRoomForm.lengthways
				// let cw = this.classRoomForm.crosswise
				for (var i = 0; i < nod.length; i++) {
					var queryNod = {
						crosswise: '',
						lengthways: ''
					}
					queryNod.crosswise = parseInt(parseInt(nod[i]) / parseInt(lw)) + 1
					queryNod.lengthways = (parseInt(nod[i]) % parseInt(lw)) + 1
					arr.push(queryNod)
				}
			},
			// 新建教室--表单提交
			createClassRoomList() {
				this.$refs.classRoomFormRef.validate(async valid => {
					if (!valid) return
					else {
						let queryData = this.classRoomForm
						let resData = await createClassRoom(queryData)
						console.log(queryData)
						if (resData.code !== 200) return
						else {
							console.log(resData)
							this.xinjianjiaoshiDialog = false
							return this.$message.success('新建班级成功')
						}
            this.$refs.classRoomFormRef.resetFields()
            this.searchClassRoomList();
					}
				})
			},
			handleClose() {
				this.xinjianjiaoshiDialog = false;
        this.$nextTick(() => {
        	 this.$refs.classRoomFormRef.resetFields();       // this.$refs.adduserform.resetFields();
         });
			},
			// 获取教室列表表格
			async searchClassRoomList () {
				var resData = await searchClassRoom(this.searchCLassRoomQueryInfo)
				if (resData.code === 200) {
					console.log('查询教室成功',resData.data)
					this.classShowTable = resData.data.list
					this.total = resData.data.total
          this.currentPage = resData.data.current_page
					this.$refs.searchForm.resetFields()
				} else {
					this.$message.error('获取教室信息失败')
				}
			},
			// 查看当条信息
			async see(data) {
				this.seeDig = true;
        console.log(data)
        this.seeData = data
			},
			// 编辑表格操作事件
			edit(row) {
				this.editjiaoshiDialog = true;
        console.log(row)
        this.classRoomForm = {
          unid:row.unid,
          classroom_name:row.classroom_name,
          classroom_num:row.classroom_num,
          people:row.people,
          lengthways:row.lengthways,
          crosswise:row.crosswise
        }
			},
      //编辑更新
      determine(){
        this.isShowzuowei = false;
        createClassRoom(this.classRoomForm).then(rs=>{
          if(rs.code == 200){
              this.$message.success('编辑成功')
              this.editjiaoshiDialog = false;
              // this.$forceUpdate();

          }else{
            this.$message.success('编辑失败')
          }
          this.$refs.classRoomFormRef.resetFields()
          this.searchClassRoomList();
        })
      },
      close(){
        this.editjiaoshiDialog = false;
        this.$nextTick(() => {
        	 this.$refs.classRoomFormRef.resetFields();       // this.$refs.adduserform.resetFields();
         });
      },
      // 处理分页切换
      handleSizeChange(val) {
      	this.searchCLassRoomQueryInfo.limit = val
      	this.query()
      },
      handleCurrentChange(val) {
      	this.searchCLassRoomQueryInfo.page = val
      	this.query()
      },
      // 条件查询
      queryScreenSemesterData(){
        this.searchCLassRoomQueryInfo.page = 1,
        this.searchCLassRoomQueryInfo.limit = 10,
        this.query()
      },
      async query () {
        let queryData = {
          classroom_name: this.searchCLassRoomQueryInfo.classroom_name,
          page:this.searchCLassRoomQueryInfo.page,
          limit:this.searchCLassRoomQueryInfo.limit
        }
        let rs = await searchClassRoom(queryData)
        if(rs.code == 200){
          this.total = rs.data.total
          this.currentPage = rs.data.current_page
          this.classShowTable = rs.data.list
          console.log(this.classShowTable)
        }
      },
      // 重置条件查询
      async restLess () {
        this.searchCLassRoomQueryInfo.classroom_name = null
        this.$message.success('重置成功！')
        this.searchClassRoomList()
      },
    }
	}
</script>
<style scoped lang='scss'>
/* 	// .el-table--mini {
	//   font-size: 14px;
	// } */
	.bottomPaginationaa {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-top: 40px;
	}
	.xinjianjiaoshiBtn {
		margin-bottom: 12px;
	}
	.div3 {
		div {
			align-items: center;
			text-align: center;
		}
	}
	.div1 {
		overflow: auto;
		div {
			float: left;
			font-size: 10px;
		}
	}
	.div2 {
		overflow: auto;
		div {
			margin-top: 20px;
			float: left;
			margin-left: 10px;
		}
	}
	.xinjianbanjiDIV {
		display: flex;
		.xinjianbanjiDIV2 {
			margin-left: 200px;
		}
	}
	.tableAndPageDIV {
		display: flex;
		flex-direction: column;
	}
	.zuoweitubiao {
		display: flex;
		width: 600px;
		flex-wrap: wrap;
		margin-left: 200px;
		span {
			margin-left: 20px;
		}
	}
	.activeClass {
		color: rgb(43, 138, 43);
	}
	.bujuDIV {
		justify-content: flex-start;
		display: flex;
	}
	.bujuzhanshiDiv {
		display: flex;
		justify-content: center;
		margin-top: 16px;
		div {
			width: 200px;
			background-color: rgb(200 200 200 / 1);
			text-align: center;
			border-radius: 30px;
			padding: 6px 12px;
			font-size: 16px;
		}
	}
	.shezhijiaoshibuju {
		display: flex;
		justify-content: flex-end;
		margin-right: 60px;
		.el-form-item {
			margin-bottom: 8px;
		}
	}
	.tuologoshowDIV {
		display: flex;
		justify-content: center;
		margin-top: 15px;
		padding-right: 50px;
		span {
			margin-left: 100px;
		}
		div {
			line-height: 50px;
			margin-left: 10px;
		}
	}
	.zuoweibujuDivAvtive {
		display: none;
	}
	.bottomDiv {
		display: flex;
		justify-content: center;
		margin-top: 12px;
		font-weight: 600;
	}
	.AAzuoweitubiaoDIV {
		display: flex;
		justify-content: center;
		.tubiao10 {
			display: flex;
			flex-wrap: wrap;
			width: 600px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao9 {
			display: flex;
			flex-wrap: wrap;
			width: 540px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao8 {
			display: flex;
			flex-wrap: wrap;
			width: 480px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao7 {
			display: flex;
			flex-wrap: wrap;
			width: 420px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao6 {
			display: flex;
			flex-wrap: wrap;
			width: 360px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao5 {
			display: flex;
			flex-wrap: wrap;
			width: 300px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao4 {
			display: flex;
			flex-wrap: wrap;
			width: 240px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao3 {
			display: flex;
			flex-wrap: wrap;
			width: 180px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao2 {
			display: flex;
			flex-wrap: wrap;
			width: 120px;
			span {
				margin-left: 10px;
			}
		}
		.tubiao1 {
			display: flex;
			flex-wrap: wrap;
			width: 60px;
			span {
				margin-left: 10px;
			}
		}
	}
	.icon-yixuanzuowei:before {
		content: "\e616";
		font-size: 50px;
		color: #009688;
	}
	.icon-zuowei1:before {
		font-size: 50px;
		content: "\e619";
	}
	.div1row {
		display: flex;
	}
	.div2row {
		display: flex;
	}
</style>
